<template>
	<view style="padding-right: 20rpx;">
		<view style="font-size: 60rpx;margin-top: 30rpx;color: #002fa7;padding-left: 60rpx;">
			注册账号
		</view>
		<view style="font-size: 24rpx;margin-top: 30rpx;color: #c4c4c4;padding-left: 60rpx;">

		</view>
		<!--上部分-->
		<view class="conter">
			<view class="sTop">
				<uni-forms>
					<uni-forms-item>
						<uni-easyinput type="text" v-model="user.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput type="text" v-model="user.name" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput type="password" v-model="user.pwd" placeholder="请确认密码" />
					</uni-forms-item>
				</uni-forms>
			</view>

			<uni-forms>
				<uni-forms-item>
					<view class="sjh">
						<uni-easyinput type="text" v-model="user.yzm" placeholder="请输入验证码" />
						<button style="font-size: 20rpx; margin-left: 110rpx;" @click="huoqu()">获取验证码</button>
					</view>

				</uni-forms-item>
			</uni-forms>


			<view class="yzm">
				<view class="">
					验证码登录
				</view>
				<view class="">
					忘记密码?
				</view>
			</view>
			<view class="anniu">
				<button @click="zhuce">注册</button>
			</view>
		</view>

		<!--下面部分-->
		<view class="hodler">
			<text>登录/注册即视为你同意&laquo;服务条款&raquo;</text>
		</view>
	</view>
</template>

<script setup>
	//引入存放jwt的容器
	import {
		tokenStore
	} from '@/stores/token';
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入容器
	const token = tokenStore()
	const u = userStore()
	//引入拦截器
	import '@/config/requst.js'
	import {
		ref
	} from 'vue';
	import {
		http
	} from '@/config/requst.js';
	//定义用户信息
	const user = ref({
		phone: '',
		password: '',
		name: '',
		yzm: ''
	})
	//获取验证码
	const huoqu = async() => {
		if(user.value.phone == ''){
			uni.showToast({
				title: '手机号不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.phone.length < 11 && user.value.phone > 11) {
			uni.showToast({
				title: '请输入11位手机号',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		const res = await http({
			url: "/user/sendCode/"+user.value.phone,
		})
		console.log(res)
	}

	//点击登录按钮执行的事件
	const zhuce = () => {
		if (user.value.phone == '') {
			uni.showToast({
				title: '手机号不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.name == '') {
			uni.showToast({
				title: '用户名不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}

		if (user.value.password == '') {
			uni.showToast({
				title: '密码不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.phone.length < 11 && user.value.phone > 11) {
			uni.showToast({
				title: '请输入11位手机号',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.name.length >= 5 && user.value.name <= 10) {
			uni.showToast({
				title: '请输入5-10位用户名',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.password.length >= 5 && user.value.password <= 10) {
			uni.showToast({
				title: '请输入5-10位密码',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.pwd != user.value.password) {
			uni.showToast({
				title: '密码不一致',
				duration: 2000,
				icon: 'error'
			});
			return;
		}

		if (user.value.yzm.length != 6) {
			uni.showToast({
				title: '请输入验证码',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		//调用登录的方法
		lo()
	}

	//登录向后端发送异步请求
	const lo = async () => {
		//发送注册请求
		const res = await http({
			url: "/user/register",
			method: 'POST',
			data: user.value
		})
		if (res.code == 20041) {
			uni.showToast({
				title: '注册成功',
				duration: 2000,
			});
			uni.navigateTo({
				//跳转到登录页面
				url: '/pages/login/login',
			})
		} else {
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error'
			});
		}
	}
</script>

<style lang="scss">
	.conter {
		display: flex;
		flex-direction: column; //主轴为y轴
		align-items: center; //交叉轴的位置
		justify-content: flex-start; // 主轴的位置
		height: 1000rpx;
		margin-top: 50rpx;
		width: 700rpx;

		.wenben input {
			width: 580rpx;
			height: 70rpx;
			border: 1px solid #cccccc;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 35rpx;
			//padding-left: 20rpx;
		}

		.sjh {
			display: flex;

			// justify-content: space-around;

			// .sjh .uni-easyinput {
			// 	width: 100rpx;
			// }
		}

		.anniu button {
			margin-top: 50rpx;
			width: 600rpx;
			height: 90rpx;
			background-color: #002fa7;
			//border-radius: 45rpx;
			color: #fff;
		}

		.sTop .uni-easyinput {
			width: 550rpx;
			border: none;
		}

		.yzm {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 580rpx;
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #002fa7;
		}
	}

	.hodler {
		text-align: center;
		color: #cccccc;
		font-size: 25rpx;
	}
</style>